// 回到顶部功能块
window.addEventListener("load", function () {
	$(".iconfont");
	console.log($(".iconfont"));

	this.window.addEventListener("scroll", function () {
		if (this.scrollY > 1000) {
			$(".iconfont").style.display = "block";
		} else {
			$(".iconfont").style.display = "none";
		}
	});
	//给节点绑定点击事件，点击时实现回到顶部功能；
	$(".iconfont").addEventListener("click", function () {
		window.scrollTo({
			top: 0,
			left: 0,
			behavior: "smooth",
		});
	});
});
//api分类动态渲染板块
window.addEventListener("load", function () {
	// 将下方数组动态渲染到ul标签内

	const apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];

	let html = ""; //声明一个html空字符串结构，用于储存li结构
	apiTypeData.forEach(function (v, i) {
		//遍历上方数组，获取到其中的每一个数组元素

		if (i === 0) {
			//判断当索引等于零的时候让第一个li结构显示激活样式
			html += `<li title="${v.keyword}" class = "active">${v.name}</li>`;
		}
		if (v.isnew) {
			//通过判断标签内isnew属性的真假来判断是否给li元素节点添加字体加粗效果
			html += `<li title="${v.keyword}" class = "fw-bold">${v.name}</li>`;
		} else {
			html += `<li title="${v.keyword}" >${v.name}</li>`;
		}
		// 上方条件都不满足就给li添加基本样式;
	});

	$(".classIf-Rice").innerHTML = html; //获取到ul标签节点，将拼接好的li结构通过innerHTML方法添加到ul标签内

	//利用元素节点类样式的操作方法classList中的 增加：add("样式类名")   删除：remove("样式类名")来给元素添加属性，保留其他元素节点的原有属性
	const liNodes = $(".classIf-Rice li");

	liNodes.forEach(function (value) {
		value.addEventListener("click", function () {
			liNodes.forEach(function (nodeValue) {
				nodeValue.classList.remove("active");
			});

			value.classList.add("active");

			$(".classIf strong").textContent = value.textContent;
			$(" .serchInp ").value = this.title; //
		});
	});
});

// 企业专用版块动态渲染;
window.addEventListener("load", function () {
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	// 分页器部分点击事件
	const pageNodes = $(".pageChc-cont li");

	pageNodes.forEach(function (v, i) {
		v.addEventListener("click", function () {
			//点击分页器，实现动态渲染并分页的效果
			pageNodes.forEach(function (vbor) {
				vbor.classList.remove("active");
			}); //排他思想

			render(Number(v.textContent), 5, listDataArr);
			this.classList.add("active");
		}); //点击事件框
	}); //分页器遍历框
	// 点击分页器实现卡片的分页效果
	//pagenation:分页器的值（1 ， 2  ， 3 ，4）；pageSize：每页数据条数；arr，被渲染的数组；
	// 求开始索引 （当前页码 - 1） * 每页数据条数
	function render(pagenation, pageSize, arr) {
		//封装一个函数用于分页器点击时实现动态渲染和分页功能
		let startIndex = (pagenation - 1) * 5; //找出页数的值与每页数据条数之间的关系，求出需要截取的开始下标和结束下标
		newPage = arr.slice(startIndex, startIndex + pageSize); // 截取出新数组后用一个变量接一下newPage

		// 渲染功能板块
		let SStHtml = ""; //声明一个新的html结构（SStHtml）用于保存渲染的html结构
		newPage.forEach(function (value) {
			//遍历数组（要被渲染的属性，如这里的name ，isSpecial）
			SStHtml += `<li class="rel"> 
						${
							value.isSpecial
								? '<span class="special ftS-12 abs txtCent">企业专用</span>'
								: ""
						}

						<img src="../images/${value.img}" alt="" /> 

						<p class="guide mgiTB-16 clr-3d3e">${value.name}</p>

						<p class= ${value.isSpecial ? "clr-f546" : "clr-29c"}>${value.price}</p>
						
						<a href="#" class="data abs txtCent">申请数据</a>
					</li>`; //利用模板字符串拼接结构，需要改变的属性注意格式，属性加入到对应结构的位置，使用${}
		});

		$(".SSt").innerHTML = SStHtml; //这一步不要忘记了，注意使用innerHTM （渲染目标标签.innerHTML = html；）
	} //函数框

	render(1, 5, listDataArr);
});

//首页导航栏
window.addEventListener("load", function () {
	const LinkNodes = $(".navgit");

	LinkNodes.forEach(function (v) {
		v.addEventListener("click", function () {
			LinkNodes.forEach(function (vbor) {
				vbor.classList.remove("active");
			});

			v.classList.add("active");
		});
	});
});
window.addEventListener("load", function () {
	// 点击申请数据按钮弹出扫码登录

	$(".scanArea").style.visibility = "hidden"; // 扫码登录界面默认不显示
	//事件委派，给申请数据a标签的祖先节点ul（$(".SSt")）绑定点击事件
	$(".SSt").addEventListener("click", function (evt) {
		//利用事件源evt的事件对象evt.target的nodeName找到“A”这种情况就找到了申请数据的a标签；
		if (evt.target.nodeName === "A") {
			//判断，ul($(".SSt"))下的各个元素节点nodeName，如果该子元素节点的nodeName是"A",点击事件就生效
			//点击时让扫码登录界面显示
			$(".scanArea").style.visibility = "visible";
			// 点击显示登录界面时让滚动条隐藏
			$("body").style.overflow = "hidden";
		}
	});
	// // 点击扫码登录界面让自己消失
	// $(".scanArea").addEventListener("click", function () {
	// 	$(".scanArea").style.visibility = "hidden";
	// 	// 登录界面消失时滚动条出现
	// 	$("body").style.overflow = "auto";
	// });

	$(".submitForm")[0].style.display = "none"; //登录界面默认不显示账户登录界面；
	// 登录界面账号登录按钮与扫码登录按钮板块;
	const loginNode = $(".loginNumScanCode");
	loginNode.forEach(function (v, i) {
		v.addEventListener("click", function () {
			//排他思想，点击时想让所有消失
			loginNode.forEach(function (value, index) {
				value.classList.remove("active");
				$(".submitForm")[index].style.display = "none";
			});

			this.classList.add("active");
			$(".submitForm")[i].style.display = "block";
		});
	});

	$(".registerNow").forEach(function (v) {
		//点击立即注册，隐藏扫码登录界面
		v.addEventListener("click", function () {
			$(".scanArea").style.visibility = "hidden";

            $("body").style.overflow = "auto"
          
		});
	});
});
